import React from 'react'
import { SearchBar, Carousel, Grid, NoticeBar, Card, Badge } from 'antd-mobile'
import { getCarousel, getMenu, getInfo, getFaq, getHouse } from '../../api/allapi'

const badgeStyleObj = {
  marginLeft: 12,
  padding: '0 3px',
  backgroundColor: '#fff',
  borderRadius: 2,
  color: '#f19736',
  border: '1px solid #f19736',
}
const thumbStyle = {
  width: '125px',
  height: '95px'
}
class Main extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      imgHeight: 176,
      swipeData: [],
      menuData: [],
      infoData: [],
      faqData: [],
      houseData: []
    }
  }
  componentDidMount() {
    // this.autofocusInst.focus()
    this.getSwipeData()
    this.getMenuData()
    this.getInfoData()
    this.getFaqData()
    this.getHouseData()
  }
  componentWillUnmount() {
    this.setState = state => {
      return
    }
  }
  // 获取轮播图
  getSwipeData = async () => {
    const { data: { list }, meta: { status, msg } } = await getCarousel()
    if (status === 200) {
      this.setState({
        swipeData: list
      })
    } else {
      console.log(msg);
    }
  }
  // 获取菜单数据
  getMenuData = async () => {
    const { data: { list }, meta: { status, msg } } = await getMenu()
    if (status === 200) {
      this.setState({
        menuData: list.map((item, i) => ({
          id: item.id,
          icon: `http://127.0.0.1:8086/public/0${i + 1}.png`,
          text: item.menu_name,
        }))
      })
    } else {
      console.log(msg);
    }
  }
  // 获取资讯数据
  getInfoData = async () => {
    const { data: { list }, meta: { status, msg } } = await getInfo()
    if (status === 200) {
      this.setState({
        infoData: list
      })
    } else {
      console.log(msg);
    }
  }
  /// 获取主页问答数据
  getFaqData = async () => {
    const { data: { list }, meta: { status, msg } } = await getFaq()
    if (status === 200) {
      this.setState({
        faqData: list
      })
    } else {
      console.log(msg);
    }
  }
  // 获取主页分类房屋信息
  getHouseData = async () => {
    const { data: { list }, meta: { status, msg } } = await getHouse()
    const arr1 = []
    const arr2 = []
    list.forEach(item => {
      if (item.group_id === 1) {
        arr1.push(item)
      } else if (item.group_id === 2) {
        arr2.push(item)
      }
    })
    const newList = [arr1, arr2]
    if (status === 200) {
      this.setState({
        houseData: newList
      })
    } else {
      console.log(msg);
    }
  }
  // 点击菜单
  clickMenu = (el, index) => {
    // console.log(el)
    // console.log(index)
    const {id, text} = el
    // console.log(this.props);
    const {history} = this.props
    switch(id) {
      case 1:
      case 2:
      case 3:
      case 4:
        // 渲染详情组件 -> detail.js
        history.push('/detail', {title: text, home_type: id})
        break
      case 5:
        history.push('/map', {title: text})
        break
      case 7:
        history.push('/cal')
        break
    }
  }
  render() {
    const carouselTemplate = this.state.swipeData.map((val, i) => (
      <a
        key={i}
        style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
      >
        <img
          src={val.original}
          alt=""
          style={{ width: '100%', verticalAlign: 'top' }}
          onLoad={() => {
            // fire window resize event to change height
            window.dispatchEvent(new Event('resize'));
            this.setState({ imgHeight: 'auto' });
          }}
        />
      </a>
    ))
    const infoTemplate = this.state.infoData.map((item, i) => {
      return (
        <NoticeBar
          key={item.id}
          marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }}
          mode="link" action={<span>去看看</span>}>
          {item.info_title}
        </NoticeBar>
      )
    })
    let faqTemplate = this.state.faqData.map((item, i) => {
      return (
        <Card key={i}>
          <Card.Header
            title={item.question_name}
            thumb={<Badge text="HOT" hot style={{ marginLeft: 12 }} />}
          />
          <Card.Body>
            <div>
              <Badge text={item.question_tag} style={badgeStyleObj} />
              <Badge text={item.answer_content} style={badgeStyleObj} />
              <Badge text={item.atime} style={badgeStyleObj} />
              <Badge text={item.qnum} style={badgeStyleObj} />
            </div>
          </Card.Body>
        </Card>
      )
    })
    faqTemplate = [<b key="faqTitle">好客问答</b>, ...faqTemplate]
    const houseTemplate = this.state.houseData.map((item, i) => {
      const houseDataTemplate = item.map((item2, j) => {
        return (
          <Card key={j}>
            <Card.Header
              thumb="http://127.0.0.1:8086/public/home.png"
              thumbStyle={thumbStyle}
              extra={
                <div>
                  <Badge text={item2.home_desc} style={badgeStyleObj} />
                  <Badge text={item2.home_name} style={badgeStyleObj} />
                  <Badge text={item2.home_price} style={badgeStyleObj} />
                  <Badge text={item2.home_tags} style={badgeStyleObj} />
                  <Badge text={item2.home_time} style={badgeStyleObj} />
                  <Badge text={item2.home_type} style={badgeStyleObj} />
                </div>
              }
            />
          </Card>
        )
      })
      const title = ['最新开盘', '二手精选']
      return (
        <div key={i}>
          <b>{title[i]}</b>
          {houseDataTemplate}
        </div>
      )
    })
    return (
      <div>
        {/* 搜索框 */}
        <SearchBar placeholder="请输入搜索内容" ref={ref => this.autofocusInst = ref} />
        {/* 轮播图 */}
        <Carousel
          autoplay={true}
          infinite
          beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
          afterChange={index => console.log('slide to', index)}
        >
          {carouselTemplate}
        </Carousel>
        {/* 菜单 */}
        <Grid data={this.state.menuData} activeStyle={false} onClick={this.clickMenu} />
        {/* 资讯 */}
        {infoTemplate}
        {/* 问答 */}
        {faqTemplate}
        {/* 房屋 */}
        {houseTemplate}
        {/* 底部留白 */}
        <div style={{ height: '50px' }}></div>
      </div>
    )
  }
}
export default Main
